<template>
    <div class="rating_page">
      <head-top head-title="在线支付" :go-back='true'></head-top>
      <section class="show_time_amount">
        <header class="time_last">支付剩余时间</header>
        <p class="time">{{remaining}}</p>
      </section>
      <section class="pay_way_list">
        <yd-cell-group title="选择支付方式">
          <yd-cell-item type="radio">
            <yd-icon slot="icon" name="shield" size="1.5rem" color="#3190e8"></yd-icon>
            <span slot="left">支付宝</span>
            <input slot="right" type="radio" value="1" v-model="payWay"/>
          </yd-cell-item>

          <yd-cell-item type="radio">
            <yd-icon slot="icon" name="weixin" size="1.5rem" color="#04be02"></yd-icon>
            <span slot="left">微信</span>
            <input slot="right" type="radio" value="2" v-model="payWay"/>
          </yd-cell-item>
        </yd-cell-group>

      </section>
      <!--按钮直接绑定在button上，事件无效-->
      <div class="btn" @click.stop="paycomfirm">
        <button  class="yd-btn-block" :class="[!canPay ? 'yd-btn-disabled':'yd-btn-primary']">确认支付</button>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import headTop from 'components/header/head'
  import {mapGetters,mapMutations} from 'vuex'
  export default {
    data(){
      return{
        payWay:'',
        countNum: 10, //倒计时10s
        canPay:true
      }
    },
    beforeDestroy(){
      // 当实例销毁之前（例如进入该页面后，马上跳出）
      clearInterval(this.timer);
    },
    created(){
    },
    mounted(){
      this.caculateTime();
    },
    computed: {
      ...mapGetters([
        'userInfo'
      ]),
      //时间转换
      remaining: function (){
        let minute = parseInt(this.countNum/60);
        if(minute<10){
          minute = '0' + minute;
        }
        let second = parseInt(this.countNum%60)
        if(second<10){
          second = '0' + second;
        }
        return '00 : ' + minute + ' : ' + second;
      }
    },
    methods: {
      ...mapMutations([
        'ORDER_SUCCESS', 'BUY_CART'
      ]),
      paycomfirm(){
        if(this.canPay){
          this.$dialog.confirm({
            title:'您确定要购买吗？',
            opts: () => {
              this.$dialog.toast({mes: '请打开官方APP进行付款', timeout: 1000});
            }
          })
        }else{
          this.$dialog.toast(
            {
              mes: '已超时支付，请重新提交！',
              timeout: 1000,
              icon: 'error',
                callback: () => {
                  this.$dialog.alert({mes: '测试：给你一次重来的机会！'});
                  this.canPay=true;
                  this.countNum = 10;
                  this.caculateTime();
            }});
        }
      },
      caculateTime(){
        clearInterval(this.timer);
        this.timer = setInterval(()=>{
          this.countNum --;
          if(this.countNum === 0){
            clearInterval(this.timer);
            this.countNum=0;
            this.canPay = false;
            this.$dialog.alert({mes: '支付超时！'});
          }
        },1000)
      }
    },
    components:{
      headTop
    }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import '../../../../src/style/mixin';
  .rating_page{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 202;
    background:#f2f2f2;
    padding-top: 1.95rem;
  }
  .show_time_amount{
    background-color: #fff;
    padding: .7rem;
    text-align: center;
    .time_last{
      @include sc(.6rem, #666);
      margin-top: 1rem;
    }
    .time{
      @include sc(1.5rem, $warn);
      margin: .3rem 0 1rem;
    }
    .order_detail{
      @include fj;
      span{
        @include sc(.65rem, #666);
      }
      span:nth-of-type(2){
        color: #ff6000;
        font-weight: bold;
      }
    }
  }
  .pay_way{
    background-color: #f1f1f1;
    padding: 0 .7rem;
    @include sc(.7rem, #666);
    line-height: 1.8rem;
  }
  .pay_way_list{
    margin-top:0.5rem;
    .pay_item{
      padding: .4rem .7rem;
      @include fj;
      align-items: center;
      line-height: 2.6rem;
      border-bottom: 0.025rem solid #f5f5f5;
      .pay_icon_contaienr{
        @include fj;
        align-items: center;
        .zhifubao{
          @include wh(2rem, 2rem);
          background: url(../../../images/zhifubao.png) no-repeat;
          background-size: 100% 100%;
          margin-right: .2rem;
        }
        svg{
          @include wh(2rem, 2rem);
          margin-right: .3rem;
        }
        span{
          @include sc(.7rem, #666);
        }
      }
      .choose_icon{
        @include wh(1rem, 1rem);
        fill: #ccc;
      }
      .choosed_way{
        fill: #4cd964;
      }
    }
  }
  .determine{
    background-color: #4cd964;
    @include sc(.7rem, #fff);
    text-align: center;
    margin: 0 .7rem;
    line-height: 1.8rem;
    border-radius: 0.2rem;
    margin-top: 0.5rem;
    font-weight: bold;
  }
  .btn{
    padding:0 0.5rem;
    margin:0.5rem auto;
  }
</style>
